import React from 'react';
import { useState } from 'react';
import { useEffect } from 'react';
import {addresslist,removeadd} from '../api/index'
import { EditSOutline,DeleteOutline } from 'antd-mobile-icons'
import ADnav from '../components/ADnav'
import '../styles/Adresslist.scss'
import { useNavigate } from 'react-router-dom';
import { Dialog } from 'antd-mobile'
function Adresslist(props) {
   let [list,setlist]=useState([])
   let route= useNavigate()
    useEffect(()=>{

        address()

    },[])
    function fun(){
        route('/AddAdress')
    }
    //收货地址的封装
   function address(){
    const userid =localStorage.getItem('userid')
    addresslist(userid).then((res)=>{
        console.log(res);
        setlist(res.data.data)
    })
   }
   //修改地址 
   function xg(v){
    route(`/XAddAdress?adid=${v}`)
   }
    //删除地址
    function remo(v){
        Dialog.show({

            content: '是否确定删除地址？',
            closeOnAction: true,
            actions: [

                [
                    {
                        key: 'cancel',
                        text: '取消',
                    },
                    {
                        key: 'delete',
                        text: '删除',
                        bold: true,
                        danger: true,

                    },
                ],
            ],
            onClose: () => {
                removeadd(v).then((res)=>{
                    console.log(res);
                    address()
                })
            },
        })
        console.log(v);
    }
    return (
        <div className='Adresslist'>
            <div className="adressnav"><ADnav /></div>
            <div className="adresslist">
                {
                    list.map((v,index)=>{
                        return(
                            <div className="listkey" key={index}>
                            <div className="adbox1">
                                <div className="adleft">
                                    <input type="checkbox" />
                                </div>
                                <div className="adright">
                                    <div className="adbox2">
                                        <span>{v.name}</span>
                                        <span>{v.tel}</span>
                                        {
                                           ( v.isDefault)?<><span className='moaddress'>默认地址</span></>:<><span></span></>
                                        }

                                    </div>
                                    <div className="adbox3">
                                      收货地址:  {v.province}-{v.city}-{v.county}
                                    </div>
                                </div>
                                <div className="removeadd" onClick={()=>{remo(v.addressid)}}>
                                <DeleteOutline fontSize={20} />
                                </div>
                                <div className="xiugai" onClick={()=>{xg(v.addressid)}}>
                                <EditSOutline  fontSize={20} />
                                </div>
                            </div>
                        </div>
                        )
                    })
                }
            </div>
            <div className="adfooter">
                <p  onClick={fun}>新增地址</p>
            </div>
        </div>
    );
}

export default Adresslist;